<template>
  <div class="header-content">
    <div class="head-title">
      <span class="icon icon-logo"></span>
      {{title}}
    </div>
    <div class="head-menu">
      <span 
        :class="['menu-item',{'active': item.nameList.findIndex(item => item === $route.name) >= 0}]"
        v-for="item in menuList"
        :key="item.id" 
        @click="menuTurn(item)"
        v-show="item.show">
        <span :class="['icon', item.icon]"></span>
        {{item.name}}
      </span>
    </div>
    <div class="head-right">
      <el-dropdown trigger="click" @command="loginOut">
        <span class="el-dropdown-link">
          <span class="icon icon-user"></span>
          {{userInfo.mc}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import { LoginResource, config } from '../axios/index';

  export default {
    name: 'Header',
    data() {
      return {
        // 菜单列表
        menuList: [
          {
            id: 1,
            name: '任务管理',
            routeName: 'ManageList',
            icon: 'icon-task',
            show: true,
            nameList: ['ManageList', 'TaskList', 'TaskDetails']
          },
          {
            id: 2,
            name: '线索管理',
            routeName: 'ClueManageList',
            icon: 'icon-clue',
            show: true,
            nameList: ['ClueManageList', 'ClueResultList', 'CluesList', 'CluesDetails', 'ClueMangeInquisitor', 'PushClueOverview', 'clueSet']
          },
          {
            id: 3,
            name: '线索跟踪',
            routeName: 'ClueTrack',
            icon: 'icon-track',
            show: true,
            nameList: ['ClueTrack']
          }
        ],
        // 当前菜单
        activeMenu: 1,
        title: config.title
      }
    },
    mounted() {
      let authorityList = this.userInfo.uapUserInfoVo && this.userInfo.uapUserInfoVo.authorityList ? this.userInfo.uapUserInfoVo.authorityList : []
      if(this.userInfo.role === 2) {
        // this.menuList[0].show = false;
        this.menuList[1].routeName = 'ClueMangeInquisitor';
      }
      this.menuList.forEach(item => {
        if (authorityList.some(val => val.url === `/${item.routeName}`)) {
          item.show = true
        } else {
          item.show = false
        }
      })
    }, 
    methods: {
      ...mapActions([
        'setUserInfo'
      ]),
      // 菜单跳转
      menuTurn(item) {
        this.activeMenu = item.id;
        // let index = window.location.href.indexOf('?');
        // if(index >= 0) {
        //   let urlData = window.location.href.substr(index + 1);
        //   this.$router.push({path:'/' + item.routeName + '?' + urlData})
        // }
        // else {
          this.$router.push({path:'/' + item.routeName})
        // }
      },
      // 退出登录
      loginOut() {
        LoginResource
        .loginout()
        .then(res => {
          this.setUserInfo({});
          this.$router.push({name:'Login'});
        })
      }
    },
    computed: {
      ...mapGetters({
        userInfo: "getUserInfo"
      })
    }
  }
</script>

<style scoped lang="scss">
  .header-content {
    background: #363A45;
    box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
    color: #fff;
    padding: 0 24px;
    .head-title {
      float: left;
      font-size: 20px;
      .icon-logo {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        margin-top: -2px;
        background-image: url(../assets/icon-logo.png);
      }
    }
    .head-menu {
      float: left;
      margin-left: 160px;
      font-size: 16px;
      .menu-item {
        display: inline-block;
        padding: 0 24px;
        cursor: pointer;
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          margin-top: -2px;
        }
        .icon-task {
          background-image: url(../assets/icon-task.png);
        }
        .icon-clue {
          background-image: url(../assets/icon-clue.png);
        }
        .icon-track {
          background-image: url(../assets/icon-track.png);
        }
      }
      .menu-item.active, .menu-item.active:hover {
        background: #3C86F5;
      }
      .menu-item:hover {
        background: rgba(60, 134, 245, 0.2);
      }
    }
    .head-right {
      float: right;
      .icon-user {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        margin-top: -2px;
        background-image: url(../assets/icon-user.png);
      }
      .el-dropdown-link {
        color: #fff;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
</style>
